<template>
    <h1>{{ title }}</h1>
    <select v-model="current">
        <option value="A">组件 A</option>
        <option value="B">组件 B</option>
        <option value="C">组件 C</option>
    </select>
    <!-- <keep-alive :include="['comA', 'comB']" exclude="comC"> -->
    <keep-alive include="comA" exclude="comC">
        <component :is="componentMap[current]" />
    </keep-alive>
</template>

<script setup>
defineOptions({
    name: "isKeepAlive",
});

import { reactive, ref } from "vue";
import { useRoute } from "vue-router";
import A from "./comA.vue";
import B from "./comB.vue";
import C from "./comC.vue";
const route = useRoute();

const title = ref("vmodel");

if (route.meta && route.meta.title) {
    title.value = route.meta.title;
}

const current = ref("A");
const componentMap = reactive({ A: A, B: B, C: C });

</script>

<style scoped></style>
